<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" id="svg">
      <!--绘制标题-->
      <text class="title" x="10" y="12">渡一面试锦集周访问量</text>
      <!-- 绘制y轴数值 -->
      <g class="y-text">
        <text x="20" y="227">0</text>
        <text x="20" y="187">100</text>
        <text x="20" y="147">200</text>
        <text x="20" y="107">300</text>
        <text x="20" y="67">400</text>
        <text x="20" y="27">500</text>
      </g>
      <!--绘制x轴竖线 8个线，7个端 200/7=28.5 -->
      <path class="x-line"
        d="M25 225V230 M53.5 225V230 M82 225V230 M110.5 225V230
               M139 225V230 M167.5 225V230 M196 225V230 M225 225V230"/>

      <!--绘制x轴的刻度标签  28.5/2=14.25-->
      <g class="x-text">
        <text x="39" y="235">周一</text>
        <text x="68" y="235">周二</text>
        <text x="96" y="235">周三</text>
        <text x="124" y="235">周四</text>
        <text x="153" y="235">周五</text>
        <text x="182" y="235">周六</text>
        <text x="210" y="235">周日</text>
      </g>

      <g class="data-line">
        <path d="M39 105 L68 65 L96 145 L124 85 L153 125 L182 193 L210 45" />
      </g>

      <!-- 定义数据原点 假设数据是 300 400 200 350 250 80 450-->
      <!-- 数据在200*200的坐标系中展示， 注意缩放后的坐标位置-->
      <!-- 最大值450 向上取整500 ， 缩放比例200/500=0.4-->
      <!-- 缩放数据在坐标系中的位置 120 160 80 140 100 32 180-->
      <!-- 注意：这不是svg坐标系的位置 225-? -->
      <g class="data-circle">
        <circle cx="39" cy="105" />
        <circle cx="68" cy="65" />
        <circle cx="96" cy="145" />
        <circle cx="124" cy="85" />
        <circle cx="153" cy="125" />
        <circle cx="182" cy="193" />
        <circle cx="210" cy="45" />
      </g>
    </svg>
  </body>
  <script src="coord.js"></script>
  <script src="index.js"></script>
</html>
